<template>
  <div class="discover">
    <header>
      <div class="icon-left">
        <svg viewBox="0 0 20 32" id="arrow-left.6f6409e" width="100%" height="100%"><path fill="#fff" d="M16.552 5.633L14.508 3.59 2.243 15.853 14.508 28.41l2.044-2.043-10.22-10.513z"></path></svg>
      </div>
      <h1>发现</h1>
    </header>
    <section class="parts">
      <div class="entry">
        <router-link to="/" class="store">
          <p class="title">积分商城</p>
          <p class="tips">0元好物在这里！</p>
          <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/" alt="">
        </router-link>
        <div class="a-right">
          <router-link to="/" class="tasty">
            <p class="title">美味爆料</p>
            <p class="tips">无啤酒不夏天</p>
            <img src="https://fuss10.elemecdn.com/e/ff/3b9c4a4dfda1df548dc9274f6a7c1jpeg.jpeg?imageMogr/format/webp/" alt="">
          </router-link>
          <router-link to="/" class="recommend">
            <p class="title" style="color: rgb(27, 169, 225);">推荐有奖</p>
            <p class="tips">5元现金拿不停</p>
            <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" alt="">
          </router-link>
        </div>
      </div>
      <div class="pic-btm">
        <a href="#">
          <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" alt="">
        </a>
      </div>
    </section>
    <section class="food-push">
      <div class="activity-header">
        <span class="line-left"></span>
        <i class="iconfont">&#xe67f;</i>
        美食热推
        <span class="line-right"></span>
      </div>
      <p class="activity-sub-title">你的口味，我都懂得</p>
      <div class="activity-body">
        <router-link to="/ulike" :key="index" v-for="(item,index) in foodRecommendation">
          <img :src="item.foods[0].image_hash?'https://fuss10.elemecdn.com/'+item.foods[0].image_hash.substr(0,1)+'/'+item.foods[0].image_hash.substr(1,2)+'/'+item.foods[0].image_hash.substr(3)+ (item.foods[0].image_hash.slice(-3) == 'peg'? '.jpeg':'.png') + '?imageMogr/format/webp/':''" alt="">
          <dl>
            <dt>{{item.foods[0].name}}</dt>
            <dd><span>¥</span><span>{{item.foods[0].price}}</span></dd>
          </dl>
        </router-link>
      </div>
      <p class="activity-more">查看更多<i class="iconfont">&#xe637;</i></p>
    </section>
    <section class="food-push flash-gifts">
      <div class="activity-header">
        <span class="line-left"></span>
        <i class="iconfont">&#xe61a;</i>
        限时好礼
        <span class="line-right"></span>
      </div>
      <p class="activity-sub-title">小积分换豪礼</p>
      <div class="activity-body">
        <a href="#">
          <img src="https://fuss10.elemecdn.com/0/53/47a80976e90c99f40b745cde5246fjpeg.jpeg?imageMogr/format/webp/" alt="">
          <dl>
            <dt>iPhone 7 32G</dt>
            <dd><span>499积分</span><del>¥4499</del></dd>
          </dl>
          <span class="discount">抽奖活动</span>
        </a>
        <a href="#">
          <img src="https://fuss10.elemecdn.com/a/a2/206f0d7fa5af4b349b641fa35e730jpeg.jpeg?imageMogr/format/webp/" alt="">
          <dl>
            <dt>7元饿了么红包</dt>
            <dd><span>3500积分</span><del>¥7</del></dd>
          </dl>
          <span class="discount">0元兑换</span>
        </a>
        <a href="#">
          <img src="https://fuss10.elemecdn.com/2/cb/0409d2097e04488659bf50a5e49d7jpeg.jpeg?imageMogr/format/webp/" alt="">
          <dl>
            <dt>非卖公仔转转乐</dt>
            <dd><span>399积分</span></dd>
          </dl>
          <span class="discount">0元抽奖</span>
        </a>
      </div>
      <p class="activity-more">查看更多<i class="iconfont">&#xe637;</i></p>
    </section>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'discover',
  methods: mapMutations({
    getAxionsFood: 'RECOMMENDATION',
    showTab: 'SHOWTAB'
  }),
  mounted: function () {
    this.showTab()
    this.getAxionsFood()
  },
  computed: {
    ...mapState(['foodRecommendation'])
  }
}
</script>

<style scoped lang="scss">
@import '../../static/hotcss/px2rem.scss';

.discover {
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: px2rem(88);
    line-height: px2rem(88);
    background: #2395ff;
    color: #fff;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    font-size: px2rem(16);
    display: flex;
    justify-content: space-between;
    z-index: 2;
    .icon-left {
      width: px2rem(88);
      height:px2rem(88);
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: px2rem(44);
        height: px2rem(44);
      }
    }
    h1 {
      max-width: 50%;
      position: absolute;
      left: 50%;
      top: 0;
      font-size: px2rem(34);
      transform: translateX(-50%);
    }
  }
  .parts {
    padding-top:px2rem(88);
    margin-bottom: px2rem(21);
    a {
      display: block;
      text-decoration: none;
      box-sizing: border-box;
    }
    .entry {
      display: flex;
      justify-content: space-between;
      margin-bottom: px2rem(21);
      background: #fff;
      .store {
        width: 50%;
        padding: px2rem(30);
        padding-top: px2rem(48);
        border-right: 1px solid #ededed;
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .title {
          color: rgb(255, 151, 0);
          line-height: px2rem(43);
          font-size: px2rem(36);
          margin-bottom: px2rem(12);
        }
        .tips {
          font-size: px2rem(24);
          color: #999;
        }
        img {
          width: px2rem(150);
          height: px2rem(150);
          margin: px2rem(21) px2rem(52) 0;
        }
      }
      .a-right {
        width: 50%;
        a {
          padding: px2rem(43) px2rem(30);
          border-bottom: 1px solid #ededed;
          position: relative;
          box-sizing: border-box;
          p {
            width: px2rem(225);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .title {
            color: rgb(245, 120, 93);
            line-height: px2rem(43);
            font-size: px2rem(36);
            margin-bottom: px2rem(12);
          }
          .tips {
            font-size: px2rem(24);
            color: #999;
          }
          img {
            width: px2rem(90);
            height: px2rem(90);
            position: absolute;
            top: px2rem(43);
            right: px2rem(30);
          }
        }
      }
    }
    .pic-btm {
      a {
        display: block;
        width: 100%;
        height: px2rem(173);
        box-sizing: border-box;
        border-bottom: 1px solid #ededed;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .food-push {
    background: #fff;
    margin-bottom: px2rem(18);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    .activity-header {
      text-align: center;
      font-size: px2rem(36);
      color: #333;
      font-weight: 700;
      padding-top: px2rem(39);
      i {
        font-size: px2rem(36);
        color: red;
      }
      span {
        display: inline-block;
        margin: px2rem(16) px2rem(7) px2rem(13);
        border-bottom: 1px solid #000;
        width: px2rem(40);
        height: 0;
        position: relative;
      }
      .line-left,
      .line-right {
        &:after {
          content: "";
          display: inline-block;
          width: px2rem(10);
          height: px2rem(10);
          background-color: #333;
          border-radius: 50%;
          position: absolute;
          right: px2rem(-10);
          top: px2rem(-4);
        }
      }
      .line-right {
        &:after {
          left: px2rem(-10);
        }
      }
    }
    .activity-sub-title {
      text-align: center;
      font-size: px2rem(22);
      color: #999;
      padding-bottom: px2rem(16);
    }
    .activity-body{
      padding: px2rem(24) 0 px2rem(30) px2rem(30);
      white-space: nowrap;
      a{
        width: px2rem(222);
        text-decoration: none;
        display: inline-block;
        box-sizing: border-box;
        margin-right: px2rem(12);
        img{
          width: px2rem(222);
          height:px2rem(220);
          margin-bottom:px2rem(19);
        }
        dl{
          width: 100%;
          font-size: px2rem(26);
          dt{
            color: #333;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: 400;
            margin-bottom: px2rem(10);
          }
          dd{
            color: #ff5339;
          }
        }
      }
    }
    .activity-more{
      font-size: px2rem(26);
      color: #999;
      text-align: center;
      padding-bottom: px2rem(36);
      i{
        margin-left:px2rem(6);
        font-size:px2rem(22);
      }
    }
  }
  .flash-gifts{
    margin-bottom:px2rem(130);
    a{
      display: inline-block;
      position: relative;
      margin-right: 0!important;
      del{
        font-size: px2rem(22);
        color: #aaa;
        max-width: px2rem(22);
        display: inline-block;
        vertical-align: middle;
      }
      .discount{
        position: absolute;
        top: 0;
        left: 0;
        font-size: px2rem(22);
        color: #fff;
        background: #413d3c;
        padding: px2rem(5);
      }
    }
  }
}
</style>
